new Vue({
  el: '#app',
  data() {
    return {
      template: [],
      selectOptionsOne: [],
      selectOptionsTwo: [],
      form: {
        selectOne: '',
        selectTwo: '',
        personnel: '',
        role: '',
      },
      personnel: [],
      roles: [],
      data: [
        // {
        //   "Template_id": "8uELJO9xbU5WU0K7ty8ZUnr7jqv0EvBYqbuK5wXOiDs",
        //   "Title": "测试",
        //   "Data": [
        //     {
        //       "param_value": "date",
        //       "param_key": "",
        //       "isDisplayed": "0"
        //     },
        //     {
        //       "param_value": "city",
        //       "param_key": " \n\n城市：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "weather",
        //       "param_key": " \n\n天气：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "min_temperature",
        //       "param_key": " \n\n最低气温: ",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "max_temperature",
        //       "param_key": " \n\n最高气温: ",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "love_day",
        //       "param_key": " \n\n今天是我努力学习的第",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "birthday1",
        //       "param_key": "天 \n\n",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "note_en",
        //       "param_key": "\n\n",
        //       "isDisplayed": "0"
        //     },
        //     {
        //       "param_value": "note_ch",
        //       "param_key": " \n\n",
        //       "isDisplayed": "0"
        //     }
        //   ]
        // },
        // {
        //   "Template_id": "839qNmjrkXNuig_a9d8vVnVdiptoCgwKOmI3PZOiudk",
        //   "Title": "用户申请提醒",
        //   "Data": [
        //     {
        //       "param_value": "date",
        //       "param_key": "订单编号：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "time",
        //       "param_key": "申请时间：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "user",
        //       "param_key": "  申请用户: ",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "phone",
        //       "param_key": "\n联系方式:",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "remarks",
        //       "param_key": " 备注:",
        //       "isDisplayed": "1"
        //     }
        //   ]
        // },
        // {
        //   "Template_id": "fSgARY-1Xzoy_GZyB8XbqAq6xRX9jtSlXp53TGVyQdc",
        //   "Title": "支付提醒",
        //   "Data": [
        //     {
        //       "param_value": "date",
        //       "param_key": "点击次消息进行支付\n订单编号：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "type",
        //       "param_key": "\n订单类型：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "time",
        //       "param_key": "\n申请时间：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "phone",
        //       "param_key": " \n联系方式:",
        //       "isDisplayed": "1"
        //     }
        //   ]
        // },
        // {
        //   "Template_id": "cLZvBK0Zi5RHmX8LaRFrOfGL9LpKXFGdPbm6jRMxRtM",
        //   "Title": "新订单提醒",
        //   "Data": [
        //     {
        //       "param_value": "date",
        //       "param_key": "订单编号：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "time",
        //       "param_key": "\n下单时间：",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "user",
        //       "param_key": " \n下单用户: ",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "phone",
        //       "param_key": " \n联系方式:",
        //       "isDisplayed": "1"
        //     },
        //     {
        //       "param_value": "remarks",
        //       "param_key": "\n备注:",
        //       "isDisplayed": "1"
        //     }
        //   ]
        // },
        // {
        //   "Template_id": "uJJy9JfHKEPyzTRWJvFHV-rHDxV74TtKV8sfsjpqdLI",
        //   "Title": "报表通知",
        //   "Data": [
        //     {
        //       "param_value": "",
        //       "param_key": "您收到了一份销售额报表，请点击链接进行查看",
        //       "isDisplayed": "1"
        //     }
        //   ]
        // },
        // {
        //   "Template_id": "K2m9tGfyMDlY9SP7FszDUXhAm-WWRFsUgqVzd_BQbE8",
        //   "Title": "配货通知",
        //   "Data": [
        //     {
        //       "param_value": "",
        //       "param_key": "您有一条新的配货通知，请点击链接进行查看",
        //       "isDisplayed": "1"
        //     }
        //   ]
        // }
      ],
      templateData: [],
      currentInterfaceOptions: [],
      loading: false,
      selectedTemplate:{},
      selectedInterface:{},
      interface_URL:'',
      formData:{
        template_id :'',
        template_info_name:'',
        template_to:'',
        keyList:[]
      },
      selectedRoles:{},
      rules: {
        selectOne: [ { required: true, message: '请选择发送消息模板', trigger: 'change' }],
        selectTwo: [{ required: true, message: '请选择接口', trigger: 'change' }],
        role: [{ required: true, message: '请选择接收角色', trigger: 'change' }]
      },
      App:{
        AppId: 'wx49faa81d6090e81d',
        Appsecret: '5c771e562af5ab12a03614909852d972'
      }
    }
  },
  mounted() {
    this.getTemplate();
    this.getInterface();
    this.getRoles();
  },
  computed: {

  },
  methods: {
    //   查询所有的模板
    getTemplate(data) {
      const _this = this;
      _this.template = _this.data
      $.ajax({
        url: BASE_URL+'/weixin/getWxgTemplateMessage',
        type: 'POST',
        // data,
        success: function (res) {
          console.log('模板', res);
          _this.template = res
          // _this.handleTemplateChange(res[0].title);
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        complete: function (XMLHttpRequest) {
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        }
      });
    },
    parseTemplate(templates) {
      // const templateData = [];
      // this.templateData = templates
      templates.forEach(template => {
        template.Data.forEach(dataItem => {
          this.templateData.push({
            param_key: dataItem.param_key, // 使用param_key作为选项的标签
            param_value: dataItem.param_value,
            selectedOption: ''
          });
        });
      });
    },
    handleTemplateChange(value) {
      console.log('value', value);
      console.log('this.template', this.template);
      const selectedTemplate = this.template.find(t => t.Title === value);
      this.selectedTemplate = selectedTemplate;
      console.log(selectedTemplate, '模板');
      this.parseTemplate([selectedTemplate]);
    },
    getInterface() {
      console.log('111');
      const _this = this;
      $.ajax({
        url: BASE_URL+'/weixin/getInterfaceList',
        type: 'POST',
        success: function (res) {
          console.log('接口', res);
          _this.selectOptionsTwo = res.data
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        complete: function (XMLHttpRequest) {
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        }
      });
    },
    getRoles() {
      const _this = this;
      $.ajax({
        url: BASE_URL+'/weixin/getRoleInfo',
        type: 'GET',
        success: function (res) {
          console.log('角色', res);
          _this.roles = res.data
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        complete: function (XMLHttpRequest) {
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        }
      });
    },
    handleInterfaceChange(value) {
      const selectedInterface = this.selectOptionsTwo.find(option => option.interface_URL === value);
      this.selectedInterface = JSON.parse(selectedInterface.interface_Param);
      this.interface_URL = selectedInterface.interface_URL;
      console.log('this.interface_URL',this.interface_URL);
      this.templateData.forEach(item => {
        item.selectedOption = null;
    });
      console.log('selectedInterface', selectedInterface,JSON.parse(selectedInterface.interface_Param));
    },
    handleRolesChange(value){
      console.log('juese',value);
      const selectedRoles = value;
      this.selectedRoles =selectedRoles
      console.log('selectedRoles', selectedRoles);
    },
    getXinInterface(interface) {
      console.log('111');
      const _this = this;
      $.ajax({
        url: interface.interface_URL,
        type: 'GET',
        success: function (res) {
          console.log('新接口', res);
          _this.currentInterfaceOptions = res
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        complete: function (XMLHttpRequest) {
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        }
      });
    },
    submitForm(formName) {
      let _this = this;
      const keyList = [];
      _this.formData.template_id = _this.selectedTemplate.Template_id;
      _this.formData.template_info_name = _this.selectedTemplate.Title;
      _this.formData.template_to = JSON.stringify(_this.selectedRoles);
      
      console.log('_this.templateData', _this.templateData);
      
      _this.templateData.forEach(item => {
        keyList.push({
          interface_Name: _this.interface_URL,
          param_key: item.param_value,
          interface_key: item.selectedOption,
        });
      });
      
      _this.formData.keyList = keyList.filter(i=>i.interface_key);
      console.log('formData', _this.formData);
    
      let formRef = this.$refs[formName];
      
      // if (formRef) {
      //   formRef.validate((valid) => {
      //     if (valid) {
            _this.loading = true;
            // $.ajax({
            //   url: BASE_URL+'/weixin/submitTemplate',
            //   type: 'POST',
            //   contentType: 'application/json',
            //   data: JSON.stringify(_this.formData),
            //   success: function(res) {
            //     console.log(res);
            //     if (res === 'success') {
            //       _this.$message.success("提交成功");
            //       window.location.href = './SendMessage.html';
            //     } else {
            //       _this.$message.error("提交失败，请稍后再试");
            //     }
            //   },
            //   error: function() {
            //     _this.$message.error("操作失败，请稍后再试");
            //   },
            //   complete: function(XMLHttpRequest) {
            //     _this.loading = false;
            //     if (XMLHttpRequest.getResponseHeader("REDIRECT") === "REDIRECT") {
            //       window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
            //     }
            //   }
            // });
            $.ajax({
              url: DomainName+'/addRoleInfo',
              type: 'POST',
              data:{
                Data:JSON.stringify(_this.formData),
                URL:'/weixin/submitTemplate'
              },
              success: function (res) {
                console.log(res);
                if (res.Status == 'success') {
                  _this.$message.success("提交成功")
                  window.history.go(-1)
                } else {
                  _this.$message.error("提交失败，请稍后再试")
                }
              },
              error: function () {
                _this.$message.error("操作失败，请稍后再试")
              },
              complete: function (XMLHttpRequest) {
                _this.loading = false
                if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                  window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                }
              }
            })
          // } else {
          //   console.log("Error submit!!");
          //   return false;
          // }
        // });
      // } else {
      //   console.log("Form with ref '" + formName + "' not found!");
      // }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
})